<template>
  <div class="cpk-chart">
    <el-row :gutter="20">
      <el-col :span="24">
        <chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" width="100%" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import ChartView from '@/components/chart/index.vue';
// import { Descriptions } from 'element-ui'
// Vue.use(Descriptions);
export default {
    name: 'cpkChart',
    components: {
        ChartView
    },
    data() {
        return {
            chartOpt: {
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        symbolSize: 20,
                        data: [
                            [10.0, 8.04],
                            [8.07, 6.95],
                            [13.0, 7.58],
                            [9.05, 8.81],
                            [11.0, 8.33],
                            [14.0, 7.66],
                            [13.4, 6.81],
                            [10.0, 6.33],
                            [14.0, 8.96],
                            [12.5, 6.82],
                            [9.15, 7.2],
                            [11.5, 7.2],
                            [3.03, 4.23],
                            [12.2, 7.83],
                            [2.02, 4.47],
                            [1.05, 3.33],
                            [4.05, 4.96],
                            [6.03, 7.24],
                            [12.0, 6.26],
                            [12.0, 8.84],
                            [7.08, 5.82],
                            [5.02, 5.68]
                        ],
                        type: 'scatter'
                    }
                ]
            }
        }
    },

    methods: {
        init() {

        },
        getParam(low, mean, up, top, lsl, usl) {
            const res = {};
            res['low'] = this.getFloat(low);
            res['mean'] = this.getFloat(mean);
            res['up'] = this.getFloat(up);
            res['top'] = this.getFloat(top);
            res['lsl'] = this.getFloat(lsl);
            res['usl'] = this.getFloat(usl);
            return res;
        },
        getFloat(numbers, digit = 3) {
            return (numbers.toFixed(digit) / 1).toString();
        },
        getScattergramChartOption(data) {
            const option = {
                grid: [
                    {
                        left: '10%',
                        right: '8%',
                    }
                ],
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: 'item', // 触发类型,数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    axisPointer: { // 指示器类型。
                        type: 'shadow'
                    },
                    formatter: "{c}"
                },
                title: {
                    show: true,
                    text: data.title,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    scale: true,
                    splitLine: false,
                    // data: timeData
                    // data: data.dateList
                    axisLine: {
                        show: false,
                    }
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    splitLine: false,
                    minInterval: 0.001,
                    min: data.axisMin,
                    max: data.axisMax,
                    // min: Math.floor(data.lsl * 0.8),
                    // max: Math.ceil(data.usl * 1.2),
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                        minValueSpan: 5
                    },
                    {
                        show: true,
                        type: 'slider',
                        bottom: 0,
                        start: 0,
                        end: 100,
                        minValueSpan: 5
                    }
                ],
                series: [
                    {
                        type: 'scatter',
                        color: 'green',
                        symbolSize: 6,
                        animation: false,
                        hoverAnimation: false,
                        legendHoverLink: false,
                        large: false,
                        progressive: 5000,
                        data: data.data,
                        itemStyle: {
                            color: function (params) {
                                const value = params.value[1]
                                if (value > data.usl || value < data.lsl) {
                                    return '#ff6664';
                                }
                            }
                        }
                    },
                    {
                        type: 'line',
                        silent: true,
                        animation: false,
                        markLine: {
                            precision: 3,
                            symbol: ['none', 'none', 'none'], // 去掉箭头
                            lineStyle: {
                                width: 1,
                                // type: 'solid',  //'dotted'虚线 'solid'实线
                                color: '#ff6664',
                            },
                            // data: [{ name: 'USL', yAxis: usl }, { name: 'CL', yAxis: cl }, { name: 'LSL', yAxis: lsl }],
                            data: [{ name: 'USL', yAxis: data.usl }, { name: 'CL', yAxis: data.cl }, { name: 'LSL', yAxis: data.lsl }],
                            label: {
                                color: 'black',
                                formatter: function (params) {
                                    const str = params.name + '=' + params.data.yAxis;
                                    return str
                                },
                            },
                            tooltip: {

                            }
                        }
                    },
                ]
            };
            return option;
        },
        getData() {

            let index = 0
            this.setEchartsList("scatter");
            if (this.tabInfo["scatter"]) {
                return
            } else {

                this.tabInfo["scatter"] = true;
            }

            const spcQueryParam = this.getQueryParameter();

            this.httpService.post(Config.API_URL.SPC.GET_SPC_SCATTER_COMPRESS_DATA_URL, spcQueryParam,
                (successful, dataSet, res) => {
                    if (dataSet.stateCode === 'SYSTEM_SUCCESS') {
                        let dataJsonString = _.get(dataSet, 'data', '')
                        //console.log(atob(dataJsonString));
                        // const spcStatisticsResults=JSON.parse( this.unzip(dataJsonString));
                        var spcStatisticsResults = JSON.parse(pako.ungzip(dataJsonString, { to: 'string' }));
                        // const spcStatisticsResults= _.get(dataSet, 'data',[])
                        for (let i = 0; i < spcStatisticsResults.length; i++) {
                            const spcStatisticsResult = spcStatisticsResults[i];
                            const title = _.get(spcStatisticsResult, 'reportName', '')


                            const lsl = _.get(spcStatisticsResult, 'lsl', '')
                            const cl = _.get(spcStatisticsResult, 'standardValue', '')
                            const usl = _.get(spcStatisticsResult, 'usl', '')

                            const dataScatter = _.get(spcStatisticsResult, 'scatterResult.data', [])
                            const axisMax = _.get(spcStatisticsResult, 'scatterResult.axisMax', null)
                            const axisMin = _.get(spcStatisticsResult, 'scatterResult.axisMin', null)

                            const scatterData = {
                                data: dataScatter,
                                lsl: lsl,
                                cl: cl,
                                usl: usl,
                                title: title,
                                axisMin: axisMin,
                                axisMax: axisMax,
                                reportName: title
                            }
                            this.scatterDatas.push(scatterData)
                            if (i === 0) {
                                this.scattterReportName = title;
                                this.getLineDataByWorkShop(title)
                            }
                        }

                    } else {
                        toastr.error(
                            dataSet.messageCode ? this.translate.instant(dataSet.messageCode, { value: this.translate.instant('PART') })
                                : dataSet.message);
                    }
                },
                (successful, msg, err) => {
                    toastr.error(msg);
                }
            );
        },

        getLineDataByWorkShop(value) {
            let scatterData = null;
            _.forEach(this.scatterDatas, (item) => {
                if (item.reportName === value) {
                    scatterData = item;
                }
            });
            setTimeout(() => {
                this.showScatterChart(scatterData, 0)
            }, 50);
        },
        /**
        * 数据分布图
        */
        showScatterChart(data, i) {
            //this.Echarts.scatterChart[i] = echarts.init(document.getElementById(`scatterChart-${i}`));
            this.Echarts.scatterChart[i] = echarts.init(document.getElementById(`scatterChart`));
            if (data === null) {
                this.Echarts.scatterChart[i].dispose();
                return;
            }

            this.Echarts.scatterChart[i].setOption(EchartsClass.getScattergramChartOption(data));
            this.Echarts.scatterChart[i].on('dblclick', (params) => {
                const option = this.Echarts.NormalDistributionChart[i].getOption()
                const lineCode = option.title[0].text.split(' ')[0]
                const itemName = option.title[0].text.split(' ')[1]
                const date = params.value[0]
                const value = params.value[1]
                // console.log('value', value, data.lsl)
                if (value > data.usl || value < data.lsl) {
                    // console.log('aaa')
                    const record = {
                        type: 'SCATTER',
                        manufactureDate: date,
                        partNo: this.model.partNo,
                        lineCode: lineCode,
                        parameterName: itemName,
                    }
                    this.spcRecord = record
                    this.getAbnormalReasonDetail(record)
                    $('#abnormalReasonModal').modal('show');
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.cpk-chart {
  .table {
    margin-bottom: 10px;

    // 滚动条默认宽度是16px 将thead的宽度减16px
    thead {
      width: calc(100% - 1em);
    }

    tbody {
      border: 1px solid #ddd;
      border-bottom: none;

      tr {
        border-bottom: 1px solid #ddd;

        td {
          border-right: 1px solid #ddd;
        }

        .last-cell {
          border-right: none;
        }
      }

      tr:nth-child(even) {
        background: #fbfce5 !important;
      }

      .text-blue {
        color: #5379de;
      }

      .width-label {
        width: 104px;
      }
    }
  }
}
</style>